<template>
	<div class="playList">
		<div class="title"><span>今日赛事</span></div>
		<ul v-if='list.length > 0'>
	      <router-link
	        tag="li"
	        v-for="item of list"
	        :key="item.mid"
          :data-mid='item.mid'
	        :to="'/Deatil/' + item.mid"
	      >
	       <p class="li-tit">
          <span>{{ item.ln }}<font>{{ item.sd}}</font></span>
          <!--进行中-->
          <font class="state">
             <i v-if='item.sts == "inprogress"' class="redColor">
              <template v-if='item.game_status=="FirstHalfEnded"'>
                中场休息
              </template>
              <template v-else-if='item.game_status=="SecondHalfEnded"'>
                加时赛
              </template>
              <template v-else-if='item.hm_p1'>
                上半场
              </template>
              <template v-else-if='item.hm_p2'>
                下半场
              </template>
              <template v-else>
                {{ item.min }}<b class="dian">'</b>
              </template>
            </i>
            <i v-else-if='item.sts == "notstarted"'>未开始</i>
            <i v-else-if='item.sts == "finished"'>已结束</i>
            <i v-else>取消</i>
        </font>
             
        </p>
        <div class="li-con">
          <div class="li-con-top">
            <div class="li-con-left">
              <p><span>{{item.hz | ellipses("8")}}</span><img :src='getImgUrl(item.hig)' :onerror="noImg"></p>
            </div>
            <div class="li-con-vs">
              <p>{{ item.sts == 'inprogress'?(item.hm_rs+'-'+item.aw_rs):item.sts == 'finished'?(item.hm_fs+'-'+item.aw_fs):'vs'}}</p>
            </div>
            <div class="li-con-right">
              <p><img :src='getImgUrl(item.aig)' :onerror="noImg"><span>{{ item.az | ellipses("8")}}</span></p>
            </div>
          </div>
          <div class="li-con-bottom">
            <div class="li-con-left">
              <font>{{ item.hr?("["+item.hr+"]"):''}}</font>
            </div>
            <div class="li-con-vs">
              <div> {{ item.sts == 'inprogress'?(item.hm_hs+'-'+item.aw_hs):item.sts == 'finished'?(item.hm_hs+'-'+item.aw_hs):''}}</div>
            </div>
            <div class="li-con-right">
              <font>{{ item.ar?'['+item.ar+']':''}}</font>
            </div>
          </div>
          
        </div>
	      </router-link>
	    </ul>
      <p v-else class="noData">暂无比赛</p>
	</div>
	
</template>
<script>
import { socket } from 'jss/home/webSocket_zq.js'
	export default{
		name:'HomeList',
    props:{
      list:Array,
    },
    data:function(){
      return {
        noImg:'this.src="/static/img/soccerbig.png"',
      }
    },
    methods:{
       getImgUrl:function(_url) {
        return _url
       }
    },
    mounted () {
       var socketSerive = socket,t=this;
        socketSerive.addEventListener('message',function(event){
          const  data = JSON.parse(event.data).data;
          const Fdata = data.f //所有结束的比赛信息
          const Idata = data.in //所有正在进行中的比赛信息
          const Cdata = data.c //所有取消的比赛信息
          if (Idata.length == 0) {socketSerive.close(); return false}
          $.each(Idata,function(index,item){
            var Html = '',StateHtml='';
            if (item.game_status=="FirstHalfEnded") {
              StateHtml = '中场休息'
            }else if (item.game_status=="SecondHalfEnded") {
              StateHtml = '加时赛'
            }else if (item.hm_p1) {
              StateHtml = '上半场'
            }else if (item.hm_p2) {
              StateHtml = '下半场'
            }else{
              StateHtml ='<i class="redColor">'+item.min+'<b class="dian">\'</b></i>';
            }
            $('li[data-mid='+item.mid+']').find('.li-con-top .li-con-vs').html('<p>'+item.hm_rs+'-'+item.aw_rs+'</p>')
            $('li[data-mid='+item.mid+']').find('.li-con-bottom .li-con-vs').html('<div>'+item.hm_hs+'-'+item.aw_hs+'</div>')
            $('li[data-mid='+item.mid+']').find('.state').html('<i class="redColor">'+StateHtml+'</i>')
          })
          $.each(Fdata,function(index,item){
            var Html = '',StateHtml='';
            $('li[data-mid='+item.mid+']').find('.li-con-top .li-con-vs').html('<p>'+item.hm_rs+'-'+item.aw_rs+'</p>')
            $('li[data-mid='+item.mid+']').find('.li-con-bottom .li-con-vs').html('<div>'+item.hm_hs+'-'+item.aw_hs+'</div>')
            $('li[data-mid='+item.mid+']').find('.state').html("已结束")
          })
        });
        this.$once('hook:beforeDestroy', function () {
          socketSerive.close()
        })
    },
    activated () {}
	};
</script>
<style lang="less" scoped>
  @import '~styles/varibles.less';
  .playList{
    padding-top:3.2rem;
    padding-bottom:.1rem; 
  }
  .title{
    padding: .25rem;
    text-align: left; 
    span{
      font-size: .34rem;
      font-weight: bold;
      height: .27rem;
      line-height: .27rem;
      overflow: hidden;
      border-left:.06rem @greenColor solid;
      padding-left:.18rem;
    }
  }
  .li-con-top{
    display: flex;
    align-items: center;
    line-height: .6rem;
  }
  .li-con-bottom{
    display: flex;
    align-items: flex-end;
    line-height: .6rem;
  }
  .li-con{
    padding:.25rem .05rem;
    text-align: center;
    font-size: .24rem;
    .li-rank{
      font-size: .22rem;
      color: @grayColor;
    }
    .li-con-left,.li-con-right{
      flex: 6;
      text-align: right;
      img {
        width: .5rem;
        height: .5rem;
        margin-left: .1rem;
      }
      p{
        span{
          display: inline-block;
          height: .5rem;
          line-height: .5rem;
        }
      }
      font{
        display: block;
        padding-top:.2rem;
        padding-left:.6rem;
      }
    }
    .li-con-right{
      text-align: left;
      img{
        margin:0;
        margin-right: .1rem;
      }
      font{
        padding-right:.6rem;
        padding-left:0;
      }
    }
  }
  .noData{
    padding:0.5rem 0;
    text-align: center;
    color: @grayColor
  }
</style>